<script>
import { mapActions, mapState } from 'vuex';
import personalInformation from '@/components/personalInformation.vue'
import utils from '@/assets/utils.js'
export default {
	components: {
		personalInformation
	},
	data() {
		return {
			token: utils.storage.get('TK') || null,// 从localStorage中获取令牌
			formData: {
				password: '',
			},
			dialogVisible: false,
			imageUrl: 'https://iot.fastbee.cn/prod-api/',
			personalInformation: {
				userName: "",
				phone: "",
				email: "",
				department: "",
				role: "",
				creationDate: ""
			},
			basicProfileData: {
				nickName: '',
				phonenumber: '',
				email: '',
				sex: ''
			},
			rules: {
				password: [
					{ required: true, message: '请输入密码', trigger: 'blur' },
					{ min: 6, max: 8, message: '长度在 6 到 8 个字符', trigger: 'blur' }
				]
			}
		}
	},
	computed: {
		...mapState(['profile'])
	},
	methods: {
		//绑定微信
		handleConfirm() {
			// console.log(this.password);
		},
		//获取服务器数据
		getProfileData() {
			let personalData = this.profile.user
			// console.log(personalData);
			this.personalInformation.userName = personalData.userName
			this.personalInformation.phone = personalData.phonenumber
			this.personalInformation.email = personalData.email
			this.personalInformation.department = personalData.dept.deptName
			this.personalInformation.role = personalData.roles[0].roleName
			this.personalInformation.creationDate = personalData.createTime
			this.imageUrl = this.imageUrl + personalData.avatar

			this.basicProfileData.nickName = personalData.nickName
			this.basicProfileData.phonenumber = personalData.phonenumber
			this.basicProfileData.email = personalData.email
			this.basicProfileData.sex = personalData.sex

		},
		handleAvatarSuccess(response, file) {
			if (response.code === 200) { // 假设成功响应的状态码是200
				this.imageUrl = URL.createObjectURL(file.raw);
				this.$message.success('头像上传成功');
			} else {
				this.$message.error('头像上传失败');
			}
		},

		beforeAvatarUpload(file) {
			if(file.size>1024*1024){
				this.$message.warning('上传的图片不得大于1MB')
				return false
			}
			return true
		}

	},
	created() {
		this.getProfileData()
	}


}
</script>

<template>
	<div class="personal-center">
		<div class="personal-information">
			<el-card class="box-card" header="个人信息">
				<div class="avatar-box">
					<el-upload class="avatar-uploader" accept="image/*" action="/api/system/user/profile/avatar"
						name="avatarfile" :show-file-list="false" :headers="{
							Authorization: `Bearer ${this.token}`
						}" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
						<img v-if="imageUrl" :src="imageUrl" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</div>

				<ul class="user-details">
					<el-divider></el-divider>
					<li><span>用户名称</span>
						<p>{{ personalInformation.userName }}</p>
					</li>
					<el-divider></el-divider>
					<li><span>手机号码</span>
						<p>{{ personalInformation.phone }}</p>
					</li>
					<el-divider></el-divider>
					<li><span>用户邮箱</span>
						<p>{{ personalInformation.emile }}</p>
					</li>
					<el-divider></el-divider>
					<li><span>所属部门</span>
						<p>{{ personalInformation.department }}</p>
					</li>
					<el-divider></el-divider>
					<li><span>所属角色</span>
						<p>{{ personalInformation.role }}</p>
					</li>
					<el-divider></el-divider>
					<li><span>创建日期</span>
						<p>{{ personalInformation.creationDate }}</p>
					</li>
					<el-divider></el-divider>
					<li><span>微信绑定</span> <el-link type="primary" :underline="false" @click="dialogVisible = true">已绑定,
							点击解绑</el-link> </li>
					<el-divider></el-divider>
				</ul>
			</el-card>

			<el-dialog title="请输入密码" :visible.sync="dialogVisible" width="50%">
				<el-form :inline="true" :rules="rules" ref="password" :model="formData">
					<el-form-item label="密码" style="{font-size: 20px;}">
						<el-input placeholder="请输入密码" v-model="formData.password" show-password></el-input>
					</el-form-item>
				</el-form>

				<span slot="footer" class="dialog-footer">
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="handleConfirm">确 定</el-button>
				</span>
			</el-dialog>
		</div>

		<div class="basic-information">
			<personalInformation :basicProfileData="basicProfileData"></personalInformation>
		</div>
	</div>
</template>

<style lang="less" scoped>
.personal-center {
	display: flex;
	flex-direction: row;
	align-items: flex-start;

	// ::v-deep(){}
	.personal-information {
		height: 900px;
		flex: 1 1 auto;
		margin: 10px;
		border: 1px solid #eee;
		background-color: #fff;
		box-shadow: 0px 10px 10px #e0dfdf;

		::v-deep(.box-card) {
			height: 100%;
			font-size: 16px;

			.avatar-box {
				.avatar-uploader {
					text-align: center;

					.el-upload {
						height: 120px;
						border: 1px dashed #a09b9b;
						border-radius: 100%;
						cursor: pointer;
						position: relative;
						overflow: hidden;

						&:hover {
							border-color: #409EFF;
						}

						.avatar-uploader-icon {
							font-size: 28px;
							color: #8c939d;
							width: 120px;
							height: 120px;
							line-height: 120px;
							text-align: center;
						}
					}

					.avatar {
						width: 120px;
						height: 120px;
						display: block;
					}
				}
			}

			.user-details {
				li {
					display: flex;
					justify-content: space-between;
					// line-height: 20px;
					border-bottom: #e91d1d;

				}
			}
		}
	}

	.basic-information {
		height: 450px;
		flex: 10 1 auto;
		margin: 10px;
		border: 1px solid #eee;
		background-color: #fff;
		box-shadow: 0px 10px 10px #e0dfdf;

		.el-card {
			height: 100%;
		}
	}
}

@media screen and (max-width:750px) {
	.personal-center {
		display: flex;
		flex-direction: column;
		align-items: stretch;

		.personal-information {
			height: 900px;
			flex: 1 1 auto;
			margin: 20px;
			border: 1px solid #eee;
			background-color: #fff;
			box-shadow: 0px 10px 10px #e0dfdf;
		}

		.basic-information {
			height: 450px;
			flex: 1 1 auto;
			margin: 20px;
			border: 1px solid #eee;
			background-color: #fff;
			box-shadow: 0px 10px 10px #e0dfdf;
		}
	}
}
</style>





